<template>
	<view class="containt">
		<!-- 鉴定师标题栏 -->
		<view class="flex header flexYCenter">
			<image :src="`${baseimgURL}${list.pic}`" mode="aspectFill" class="headimage"></image>
			<view class="personageinfo">
				<view class="personagetitle">
					{{list.name||'-'}}
				</view>
				<view class="flex personagecontent flexYCenter">
					<view class="personagecontentitem" v-for="(item,index) in list.showTag">
						{{item}}
					</view>
					<view class="">
						支持对比图服务
					</view>
				</view>
			</view>
		</view>
		
		<!-- 鉴定师评分标准 -->
		<view class="flex flexYCenter grademodulebox">
			<view class="grademodule flex flexYCenter">
				<view class="grademoduleTitle">{{list.userMark}}</view>
				<view class="grademodulecontent">
					<view class="">用户评分</view>
					<view class=""><u-rate :modelValue="list.userMark||0" readonly ></u-rate></view>
				</view>
			</view>
			<view style="height: 38rpx;border: 2rpx solid #E2E2E2;"></view>
			<view class="flex flexCenterSpaceAround flex_1 rightbox">
				<!-- <view class="grademoduledesc">
					<view class="">
						平均35分钟内
					</view>
					<view class="">
						鉴定速度
					</view>
				</view> -->
				<view class="grademoduledesc">
					<view class="">
						{{list.favorableRate}}%
					</view>
					<view class="">
						好评率
					</view>
				</view>
				<view class="grademoduledesc">
					<view class="">
						{{list.serviceAttitude}}%
					</view>
					<view class="">
						服务态度
					</view>
				</view>
			</view>
		</view>
		<view class="describe">
			<view class="describearea ">
				<text class="texttitle">擅长品类</text>
				<text class="textinfo"> {{list.goodCategory||'-'}}</text>
			</view>
			<view class="describearea">
				<text class="texttitle">资质介绍</text>
				<text class="textinfo">{{list.detail||'-'}}</text>
			</view>
		</view>
		<view class="case">
			<view class="title">
				已鉴定 <span class="span">{{showOption.detailShowOrder || 0 }}</span>
			</view>
			<view class="flex rap flexSpaceBetween">
				<view class="listitem" v-for="(item,index) in list.appraiseList">
					<image :src="`${baseimgURL}${item.showProductPic}`" class="itemmastermap" mode="aspectFill"></image>
					<view class="flex flexCenterSpaceBetween">
						<view class="info">
							<view class="listiteminfotitle">
								{{item?.productName||'-'}}
							</view>
							<view class="listiteminfodesc">
								<!-- {{constant_order.ORDERCONSTANT.GOODS_CATEGORY[item.productCategory]||'-'}} -->
								{{
									constant_order.ORDERCONSTANT.GOODS_CATEGORY.filter((items,index)=>{
									   return items.value === item.productCategory
									})[0].name||'-'
								}}
							</view>
						</view>
						<image v-if="item.orSuccess===1" class="ispass" src="@/static/img/pass.png" mode=""></image>
						<image v-if="item.orSuccess===2" class="ispass" src="@/static/img/notpass.png" mode=""></image>
					</view>
				</view>
			</view>
			
		</view>
		<view class="bottomview flex">
			<view class="lastbtn" @click="jumppage('/pages/jianding/add',showOption)">我要鉴定</view>        
		</view>
	</view>
</template>

<script lang="ts" setup>
import { onLoad } from "@dcloudio/uni-app";
import { ref, onMounted,inject,reactive  } from "vue";
import { fetchAppraiseform } from "@/utils/api/authenticate";
	import { baseimgURL } from '@/config'
	const baseimgurl = inject("$baseimgurl");
	const state = reactive({
	  baseimgurl: baseimgurl
	});
	const list = ref({});
	const showOption = ref({})
	const constant_order = require("../../constant/order.js");
	// const onLoad = () => {
	// 	list.value = [{},{},{},{},{}]
	// 	console.log(list,'list')
	// };
	onLoad((options) => {
		console.log(options,1)
		showOption.value =  JSON.parse(options.item)
		getAppraiseform(JSON.parse(options.item).id)
	});
	const jumppage = (url:string,item:object) => {
	  uni.navigateTo({ url: url+'?item='+item});
	};
	const getAppraiseform = async(id: any)=>{
		const data = {
			id:id
		}
		const res = await fetchAppraiseform( data );
		res.data.serviceAttitude = res.data?.serviceAttitude.split('%')[0]
		res.data.favorableRate = res.data?.favorableRate.split('%')[0]
		res.data.showTag = res.data?.tag.split(",")
		
		res.data.appraiseList.forEach((item)=>{
			if(item?.productPic){
				item.showProductPic = item?.productPic.split(",")[0]
			}
		})
		list.value = res.data
		console.log(res.data,list.value,'qqqqq')
	}

</script>

<style lang="scss" scoped>
	.bottomview{
		position: fixed;
		left: 0;
		bottom: 0rpx;
		width: 100%;
		background: #fff;
		// height: 100rpx;
		padding: 10rpx 22rpx 16rpx;
		box-sizing: border-box;
		.lastbtn{
			width: 100%;
			height: 91rpx;
			background: #953B82;
			border-radius: 7rpx;
			text-align: center;
			line-height: 90rpx;
			font-size: 27rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
	}
	.containt {
	  padding: 14rpx 0rpx;
	}
	.header{
		padding: 0 20rpx;
	}
	.headimage{
		width: 127rpx;
		height: 127rpx;
		border-radius: 50%;
		border: 2rpx solid #953B82;
	}
	.personageinfo{
		margin-left: 22rpx;
	}
	.personagetitle{
		font-size: 33rpx;
		font-weight: 600;
		color: #333333;
	}
	.personagecontent{
		margin-top: 14rpx;
		.personagecontentitem{
			font-size: 18rpx;
			font-weight: 400;
			color: #5D7698;
		}
		:last-child{
			border-radius: 4rpx;
			border: 1rpx solid #E1BAD8;
			font-size: 18rpx;
			font-weight: 400;
			color: #953B82;
			padding: 4rpx 24rpx;
			margin-left: 12rpx;
		}
	}
	.grademodulebox{
		padding: 0 22rpx;
		margin-top: 34rpx;
	}
	.grademodule{
		margin-right: 38rpx;
	}
	.rightbox{
		padding: 0 30rpx;
	}
	.grademoduleTitle{
		font-size: 40rpx;
		font-family: Impact;
		color: #333333;
		margin-right: 10rpx;
	}
	.grademodulecontent{
		font-size: 22rpx;
		font-weight: 400;
		color: #333333;
	}
	.grademoduledesc{
		:nth-child(1){
			font-size: 24rpx;
			font-weight: 600;
			color: #333333;
		}
		:nth-child(2){
			font-size: 18rpx;
			font-weight: 400;
			color: #333333;
			opacity: .6;
		}
	}
	.describe{
		margin-top: 34rpx;
		padding: 0 20rpx;
	}
	.describearea{
		:nth-child(1){
			font-size: 25rpx;
			color: #333333;
			margin-right: 10rpx;
			font-weight: 600;
		}
		.textinfo{
			font-size: 23rpx;
			color: #666666;
			opacity: .8;
		}
	}
	.case{
		margin-top: 22rpx;
		background: #ffffff;
		height: auto;
		padding: 30rpx;
		margin-bottom: 102rpx;
		border-top-left-radius: 14rpx;
		border-top-right-radius: 14rpx;
		.title{
			font-size: 25rpx;
			font-weight: 400;
			color: #666666;
			margin-bottom: 26rpx;
			.span{
				font-size: 28rpx;
			}
		}
	}
	.rap{
		// white-space: warp;
		box-sizing: border-box;
		flex-wrap: wrap;
	}
	.listitem{
		width: 49.5%;
		// box-sizing: border-box;
		// word-break: break-all;
		margin-bottom: 22rpx;
		background: #F9F9F9;
		border-radius: 14rpx;
	}
	.itemmastermap{
		width: 100%;
		height: 348rpx;
		border-top-left-radius: 14rpx;
		border-top-right-radius: 14rpx;
	}
	.info{
		padding: 10rpx;
	}
	.listiteminfotitle{
		font-size: 24rpx;
		font-weight: 600;
		color: #333333;
	}
	.listiteminfodesc{
		font-size: 24rpx;
		font-weight: 500;
		color: #999999;
	}
	.ispass{
		width: 90rpx;
		height: 90rpx;
	}

</style>